<script setup lang="ts">
import { ref, watch, defineEmits } from 'vue';
import TopInput from './components/top-input.vue';
import TopTable from './components/top-table.vue';
import AddForm from './components/add-form.vue';

const emit = defineEmits(['updateTableData']);
const tableData = ref('');
const locationTypeOptions = [
  {
    label: '装车位',
    value: 8,
  },
  {
    label: '卸车位',
    value: 9,
  },
  {
    label: '装车缓存位',
    value: 10,
  },
  {
    label: '卸车缓存位',
    value: 11,
  },
];

const areaOptions = [
  {
    label: '101',
    value: '101',
  },
  {
    label: '17180',
    value: '17180',
  },
];

watch(
  tableData,
  () => {
    emit('updateTableData', tableData.value);
  },
  { deep: true }
);
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">调度库位管理</div>
      </template>
      <div class="content">
        <TopInput
          @updateArray="tableData = $event"
          :locationTypeOptions="locationTypeOptions"
        />
        <a-divider />
        <TopTable
          :table-data="tableData"
          :locationTypeOptions="locationTypeOptions"
          :areaOptions="areaOptions"
        />
      </div>
      <AddForm
        :locationTypeOptions="locationTypeOptions"
        :areaOptions="areaOptions"
      />
    </a-card>
  </div>
</template>

<style scoped>
.flow-query {
  margin: 0px;
  padding: 10px;
  height: 100%;
}
.card-title {
  font-size: 24px;
}
.content {
  display: flex;
  flex-direction: column;
}
</style>
